<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>抽卡模拟系统</title>
    <script src="js/pixi/pixi.min.js"></script>
    <script src="js/pixi/pixi-spine.js"></script>
    <script src="js/pixi/pixi-sound.js"></script>
    <script src="js/pixi/charm.js"></script>
    <script src="js/pixi/dust.js"></script>
    <!--<script src="js/three/three.js"></script>
    <script src="js/three/libs/fflate.min.js"></script>
    <script src="js/three/FBXLoader.js"></script>-->
    <script src="js/vue/vue.min.js"></script>
    <script src="js/gacha.js"></script>
    <script src="js/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @font-face {
            font-family: 'Notosanshans';
            src: url("./asstes/fonts/NotoSansHans-Light.otf") format("opentype");
        }

        @font-face {
            font-family: 'Notosanshans-Medium';
            src: url("./asstes/fonts/NotoSansHans-Medium.otf") format("opentype");
        }

        @font-face {
            font-family: 'TeYaSong';
            src: url("./asstes/fonts/TeYaSong.ttf") format("truetype");
        }

        @font-face {
            font-family: 'NovecentoWide';
            src: url("./asstes/fonts/Novecento wide UltraLight.otf") format("opentype");
        }

        body {
            font-family: 'Notosanshans-Medium', 'Notosanshans';
            font-size: 48px;
        }
    </style>
</head>

<body style="text-align: center;">
    <div class="app"></div>
    <!--<script type="module">
        // import * as THREE from './js/three/three.module.js';

        import { GLTFLoader } from './js/three/GLTFLoader.js';
        import { DRACOLoader } from './js/three/DRACOLoader.js';

        var fbx_loader = new THREE.FBXLoader()

        let scene, camera, renderer
        //创建场景
        scene = new THREE.Scene();
        // scene.autoUpdate = true
        scene.background = new THREE.Color( 0xcfcfcf );
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = THREE.sRGBEncoding;
        document.body.appendChild(renderer.domElement);
        /*
        fbx_loader.load('./asstes/models/gacha_phase/gacha_phase_0.fbx', function (object) {
            object.mixer = new THREE.AnimationMixer(object);
            mixers.push(object.mixer);
            var action = object.mixer.clipAction(object.animations[0]);
            action.play();
            object.scale.multiplyScalar(.5);
            scene.add(object);
        }, function(result){
            console.log(result)
        }, function(err){
            console.log(err)
        });*/
        /*
        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        }
        animate();
        */
        /*
        scene.background = new THREE.Color(0xcfcfcf);
        //创建相机，设置相机的位置
        //camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        //camera.position.set(0, -100, 150);
        //灯光效果
        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);
        //创建场景渲染
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        */
        //添加gltf
        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);
        var loader = new GLTFLoader();
        
        //loader.load('./asstes/models/gacha_bag/gacha_phase_0.gltf', function (gltf) {
        loader.load('./asstes/models/Horse.glb', function (gltf) {
            gltf.scene.traverse(function (child) {
                if (child.isMesh) {
                    // console.log(child.material.color)
                    child.material.emissive = child.material.color;
                    // console.log(child.material.map)
                    child.material.emissiveMap = child.material.map;
                }
            });
            scene.add(gltf.scene);
        }, undefined, function (err) {
            console.error(err);
        });
    </script>-->
    <!--<script  type="text/javascript">
        function initSpine() {
            const app = new PIXI.Application();
            app.loader
                .add('demo', './asstes/animate/mini_char/char_196_sunbr.skel')
                .load((loader, res) => {
                    let demo = new PIXI.spine.Spine(res.demo.spineData);
                    console.log(demo)
                    demo.state.setAnimation(0, 'Default', true);
                    demo.x = demo.y = 200;

                    // Enable drawdebug，Default is false
                    demo.drawDebug = true;
                    demo.drawBones = true;
                    demo.drawRegionAttachments = true;
                    demo.drawClipping = true;
                    demo.drawMeshHull = true;
                    demo.drawMeshTriangles = true;
                    demo.drawPaths = true;
                    demo.drawBoundingBoxes = true;

                    app.stage.addChild(demo);
                });

            document.body.appendChild(app.view);
        } 
    </script>-->


    <!--<script type="module">

        import * as THREE from './js/three/three.module.js';

        import { RoomEnvironment } from './js/three/RoomEnvironment.js';
        import { OrbitControls } from './js/three/OrbitControls.js';
        import { GLTFLoader } from './js/three/GLTFLoader.js';

        import { KTX2Loader } from './js/three/KTX2Loader.js';
        import { MeshoptDecoder } from './js/three/libs/meshopt_decoder.module.js';

        let camera, scene, renderer;

        init();
        render();

        function init() {

            const container = document.createElement('div');
            document.body.appendChild(container);

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.toneMapping = THREE.ACESFilmicToneMapping;
            renderer.toneMappingExposure = 1;
            renderer.outputEncoding = THREE.sRGBEncoding;
            container.appendChild(renderer.domElement);

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.set(0, 100, 0);

            const environment = new RoomEnvironment();
            const pmremGenerator = new THREE.PMREMGenerator(renderer);

            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xbbbbbb);
            scene.environment = pmremGenerator.fromScene(environment).texture;

            const grid = new THREE.GridHelper(500, 10, 0xffffff, 0xffffff);
            grid.material.opacity = 0.5;
            grid.material.depthWrite = false;
            grid.material.transparent = true;
            scene.add(grid);

            const ktx2Loader = new KTX2Loader()
                .setTranscoderPath('./js/three/libs/basis/')
                .detectSupport(renderer);

            const loader = new GLTFLoader().setPath('./asstes/models/');
            loader.setKTX2Loader(ktx2Loader);
            loader.setMeshoptDecoder(MeshoptDecoder);
            loader.load('new.glb', function (gltf) {

                // coffeemat.glb was produced from the source scene using gltfpack:
                // gltfpack -i coffeemat/scene.gltf -o coffeemat.glb -cc -tc
                // The resulting model uses EXT_meshopt_compression (for geometry) and KHR_texture_basisu (for texture compression using ETC1S/BasisLZ)

                gltf.scene.position.y = 8;

                scene.add(gltf.scene);

                render();

            });

            const controls = new OrbitControls(camera, renderer.domElement);
            controls.addEventListener('change', render); // use if there is no animation loop
            controls.minDistance = 400;
            controls.maxDistance = 1000;
            controls.target.set(10, 90, - 16);
            controls.update();

            window.addEventListener('resize', onWindowResize, false);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

            render();

        }

        //

        function render() {

            renderer.render(scene, camera);

        }

    </script>-->


    <!--<script type="module">

        import * as THREE from './js/three/three.module.js';

        import Stats from './js/three/libs/stats.module.js';

        import { OrbitControls } from './js/three/OrbitControls.js';
        import { FBXLoader } from './js/three/FBXLoader.js';

        let camera, scene, renderer, stats;

        const clock = new THREE.Clock();

        let mixer;

        init();
        animate();

        function init() {

            const container = document.createElement('div');
            document.body.appendChild(container);

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.set(100, 200, 300);

            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xa0a0a0);
            scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);

            const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
            hemiLight.position.set(0, 200, 0);
            scene.add(hemiLight);

            const dirLight = new THREE.DirectionalLight(0xffffff);
            dirLight.position.set(0, 10, 5);
            dirLight.castShadow = true;
            dirLight.shadow.camera.top = 180;
            dirLight.shadow.camera.bottom = - 100;
            dirLight.shadow.camera.left = - 120;
            dirLight.shadow.camera.right = 120;
            scene.add(dirLight);

            scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

            // ground
            const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
            mesh.rotation.x = - Math.PI / 2;
            mesh.receiveShadow = true;
            scene.add(mesh);

            const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
            grid.material.opacity = 0.2;
            grid.material.transparent = true;
            scene.add(grid);

            // model
            const loader = new FBXLoader();
            loader.load('./asstes/models/gacha_phase/gacha_phase_0.fbx', function (object) {

                mixer = new THREE.AnimationMixer(object);

                const action = mixer.clipAction(object.animations[1]);
                action.play();

                object.traverse(function (child) {

                    if (child.isMesh) {

                        child.castShadow = true;
                        child.receiveShadow = true;

                    }

                });

                scene.add(object);

            });

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            container.appendChild(renderer.domElement);

            const controls = new OrbitControls(camera, renderer.domElement);
            controls.target.set(0, 1, 0);
            controls.update();

            window.addEventListener('resize', onWindowResize);

            // stats
            stats = new Stats();
            container.appendChild(stats.dom);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        //

        function animate() {

            requestAnimationFrame(animate);

            const delta = clock.getDelta();

            if (mixer) mixer.update(delta);

            renderer.render(scene, camera);

            stats.update();

        }

    </script>->
</body>

</html>